<template>
	<view class="header" >
		<view class="status_bar">
			
		</view>
		<view   class="cu-bar search" :style="{minHeight:menuButtonInfoHeight+'px'}">
			<view @click="blackPage()" class="cuIcon-back text-white margin-left-sm">
			</view>
			<view class="search-title text-center text-white">
				{{titleName}}
			</view>
		</view>
	</view>
</template>

<script setup>
	
	const props=defineProps({
		titleName:{
			type:String
		}
	})

	
	//获取胶囊按钮高度
	  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	  let menuButtonInfoHeight = menuButtonInfo.height ;
		
	//返回页面	
	function blackPage(){
		uni.navigateBack()
	}
	
</script>

<style lang="scss" scoped>
	
	.header{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;	
			z-index: 1;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.cu-bar{
			position: relative;
			.search-title{
				position: absolute;
				width: 100%;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				z-index: -1;
			}				
		}
	
		
	}
</style>